<template>
	<view class="login-container">
		<!-- 提示登录的图标 -->
    <uni-icons type="contact-filled" size="100" color="#AFAFAF" ></uni-icons>
    <!-- 登录的按钮 -->
    <button type="primary" class="btn-login" open-type="getUserInfo" @click="getUserInfo">一键登录</button>
    <!-- 登录的提示性文本 -->
    <text class="tips-text">登录后尽享更多权益</text>
	</view>
</template>

<script>
  import {mapMutations} from 'vuex'
	export default {
		data() {
			return {
				token:'zhangshan'
			};
		},
    methods:{
      ...mapMutations('m_user',['updateUserInfo']),
      ...mapMutations('m_user',['updateUserTonken']),
      // 通过一键登录来获取到用户的信息
      // getUserInfo(e){
      //   // 判断用户是否取消了用户授权
      //   console.log(e)
      //   if(e.detail.errMsg==='getUserInfo:fail auth deny') return uni.$showMsg('您取消了用户授权!')
      //   console.log(e.detail.userInfo)
      // }
     getUserInfo(){
             console.log("一遍成功")
             uni.getUserProfile({
                 desc:'Wexin', // 这个参数是必须的
                 success:res=>{
                   uni.$showMsg('登录成功')
                   // 将数据存储到vuex中
                   this.updateUserInfo(res.userInfo)
                    if(this.token=='') return uni.$showMsg('登录失败，请检查网络情况')
                   
                       this.updateUserTonken(this.token)
                     // 调用接口来判断是否登录成功
                     // this.getToken(res)
                 },
                 fail:err=>{
                   uni.$showMsg('您取消了数据授权！')
                     console.log(err)
                 },
                 
             })
             
    },
   
    // 这个方法是一个接口函数，用来获取用户登录的code值
   async getToken(info){
      // 获取code的值
      // [err,res]是将这个函数的返回值赋值给err和res，一个是错误的返回结果，一个是正确的返回结果
      // 如果调用成功，err将是一个null，res是一个对象，调用失败，err则不为空，res可能是一个undefine
      const [err,res]=await uni.login().catch(err=>err)
      // console.log(res)
      // 判断是否登录成功，如果成功res.errMsg==login:ok
      // 如果调用失败，err就为TRUE，将直执行后面的登录失败
      if(err || res.errMsg!=='login:ok') return uni.$showMsg('登录失败！')
      // console.log(res.code)
      // console.log(res)
      // console.log(info)
      // 将需要向服务器请求的数据，封装成一个对象
      // const query = {
      //   code:res.code,
      //   encryptedData:info.encryptedData,
      //   iv:info.iv,
      //   rawData:info.rawData,
      //   signature:info.signature
      // }
      // console.log(query)
      // // console.log(query)
      // const es= await uni.$http.post('/api/public/v1/users/wxlogin', query)
      // // if(loginResult.meta.status!==200) return uni.$showMsg('登录失败')
      // console.log(es)
      
      
    }
        
      }
	}
</script>

<style lang="scss">
.login-container{
  height: 750rpx;
  background-color: #F8F8F8;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  &::after{
    content: ' ';
    width: 100%;
    height: 40px;
    background-color: white;
    position: absolute;
    bottom: 0px;
    left: 0px;
    border-radius: 100%;
    transform: translateY(50%);
  }
  .btn-login{
    width: 90%;
    margin: 10px 0;
    background-color: #C00000;
    border-radius: 100px;
  }
  .tips-text{
    font-size: 12px;
    color: gray;
  }
}
</style>
